<template>
  <el-table :data="tableData" >
    <el-table-column label="ID" width="50">
      <template #default="scope">
        <div style="display: flex; align-items: center;font-size: 25px;cursor: pointer;">
          <i-bi-pause-circle v-if="playThisIndex===scope.row.id" @click="playSong(scope.row)" />
          <i-bi-skip-end-circle v-else @click="playSong(scope.row)" />
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="picUrl" label="歌名">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <div style="margin-left: 10px; display: flex; flex-direction: column;">
            <span>{{ scope.row.name }} <span v-if="scope.row.alia">（{{ scope.row.alia }}）</span> </span>
            <span class="inline-singer">
             <span class="vip" v-if="scope.row.fee === 1">vip</span>
             <span class="vip" v-if="scope.row.fee === 4">无版权</span>
              <span v-for="(singer, index) in scope.row.singer" :key="singer.id" @click.stop="toTSinger(singer.id)">
                {{ singer.name }}
                <span v-if="index < scope.row.singer.length - 1"> / </span>
              </span>
            </span>
          </div>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="album" label="专辑" width="230" />
    <el-table-column prop="duration" label="时长" width="80" :formatter="durationFormat">
    </el-table-column>
  </el-table>
</template>
<script setup lang="ts">
import { computed } from "vue";
import { usePlayStore } from "@/store/PlayStore";
import util from "@/tools/util";
import emitter from "@/store/emitter";

defineProps(['tableData'])
const playstore = usePlayStore();
let playThisIndex = computed(() => {
  if (playstore.isPlayed) {
    return playstore.playList[playstore.playIndex] ? playstore.playList[playstore.playIndex].id : 0;
  } else {
    return 0;
  }
});

function durationFormat(row) {
  return util.formatSongTime(row.duration);
}

function playSong(song) {
  if (song.fee === 1 || song.fee === 4){
    return
  }
  if (playstore.isPlayed) {
    emitter.emit("playAudioType", "play");
  } else {
    playstore.selectPlay([song]);
  }
}

function toTSinger(id) {
  console.log("查询歌手", id);
}
</script>
<style scoped lang="scss">
:deep(.el-table__inner-wrapper) {
  --el-table-tr-bg-color: transparentize;
  --el-table-header-bg-color: transparentize;
}
.inline-singer{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  .vip{
    color: var(--el-color-error);
    padding: 0 4px 2px 4px;
    border-radius: 5px;
    margin-right: 10px;
    border: inset 1px var(--el-color-error);
  }
}
</style>
